<html>
    <head>
        <title>Deferred Pointlight Shadow</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/claygl.js"></script>

        <script type="text/javascript" src="lib/stats.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script>
            var timeline =  new clay.Timeline();

            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            var shadowMapPass = new clay.prePass.ShadowMap();

            renderer.resize(window.innerWidth, window.innerHeight);
            var deferredRenderer = new clay.deferred.Renderer({
                shadowMapPass: shadowMapPass
            });

            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect()
            });

            var scene = new clay.Scene();

            var cube = new clay.Mesh({
                material: new clay.StandardMaterial({
                    roughness: 0.9
                }),
                culling: false,
                geometry: new clay.geometry.Cube({
                    inside: true
                })
            });
            cube.scale.set(10, 10, 10);
            scene.add(cube);

            function randomInSquare(size) {
                return (Math.random() - 0.5) * size * 2
            }
            var sphereGeo = new clay.geometry.Sphere();
            for (var i = 0; i < 20; i++) {
                var sphere = new clay.Mesh({
                    material: new clay.StandardMaterial({
                        roughness: 0.9
                    }),
                    geometry: sphereGeo
                });
                sphere.scale.set(0.5, 0.5, 0.5);
                sphere.position.set(
                    randomInSquare(8), randomInSquare(8), randomInSquare(8)
                );
                scene.add(sphere);
            }

            // var spotLight = new clay.light.Spot({
            //     color: [1, 0, 0],
            //     range: 500,
            //     intensity: 10
            // });
            // spotLight.position.set(0, 50, 0);
            // spotLight.rotation.rotateX(-Math.PI / 4);
            // scene.add(spotLight);

            for (var i = 0; i < 10; i ++) {
                var pointLight = new clay.light.Point({
                    color: [Math.random(), Math.random(), Math.random()],
                    range: 40,
                    intensity: 0.15,
                    castShadow: true,
                    shadowResolution: 512
                });
                pointLight.position.set(
                    randomInSquare(5), randomInSquare(5), randomInSquare(5)
                );
                var debugMesh = new clay.Mesh({
                    material: new clay.StandardMaterial({
                        color: [0, 0, 0],
                        rougness: 1,
                        emission: pointLight.color
                    }),
                    geometry: sphereGeo
                });
                debugMesh.scale.set(0.1, 0.1, 0.1);
                pointLight.add(debugMesh);

                var animator = timeline.animate(pointLight.position, { loop: true });
                for (var k = 0; k < 10; k++) {
                    animator.when(k * 4000 + i * 1000, {
                        x: randomInSquare(5),
                        y: randomInSquare(5),
                        z: randomInSquare(5)
                    });
                }
                animator.start('spline');
                scene.add(pointLight);
            }

            camera.position.set(0, 0, 3);
            camera.lookAt(scene.position);

            var control = new clay.plugin.OrbitControl({
                domElement: renderer.canvas,
                target: camera
            });

            timeline.on('frame', function (deltaTime) {
                control.update(deltaTime);
                // renderer.render(scene, camera);
                deferredRenderer.render(renderer, scene, camera);

                stats.update();
            });
            timeline.start();

            var stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.right = '0px';
            document.body.appendChild(stats.domElement);
        </script>
    </body>
</html>